<script setup lang="ts">
import { HomeIcon } from '@heroicons/vue/24/outline'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
</script>

<template>
  <div class="flex-center flex-1">
    <div class="text-center">
      <h1 class="text-primary mb-4 text-9xl font-bold">{{ t('views.notFound.title') }}</h1>
      <h2 class="text-base-content mb-8 text-2xl font-semibold">{{ t('views.notFound.message') }}</h2>
      <p class="text-base-content/70 mb-8 max-w-md">{{ t('views.notFound.subtitle') }}</p>
      <router-link to="/" class="btn btn-primary btn-lg">
        <HomeIcon class="mr-2 size-5" />
        {{ t('views.notFound.backToHome') }}
      </router-link>
    </div>
  </div>
</template>
